<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
</head>
<body>
    <div id="outer">
        <p>string:{{ str }}</p>
        <p>number: {{ num }}</p>
        <p>boolean: {{ bool }}</p>

        <p>{{ obj.name }} {{ obj.age }}</p>
        <p> {{ obj.age }} </p>
        <p>{{ arr[2] }}</p>
        <p>{{ fn }}</p>
        <p>{{ fn() }}</p>

        <!-- 表达式写法 -->
        <p>{{ bool? "ok" : "no no no" }}</p><!-- 三元运算符 -->
        <p>{{ bool || "no no no" }}</p><!-- 逻辑运算符或 左边为false 就返回右边的值 -->
        <p>{{ bool && "no no no" }}</p><!-- 逻辑运算符与 左边为true 就返回右边的值 -->
    </div>

    <script src="./js/vue.js"></script>

    <script>
        //创建vue实例
        const vm = new Vue({
       //存放数据
            data:{
                str:"hello World",
                num:20,
                bool:true,

                obj:{
                    name:"lisa",
                    age:18,
                },
                arr:["a","b","c"],
                fn:function(){
                    console.log(222);
                    return "天天 天气晴朗";
                }
            }
        });

        //渲染
        vm.$mount("#outer")
    </script>
</body>
</html>